import { Component, Ref } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Segmented, Select, SelectOption, Switch } from 'ant-design-vue'
import type { SelectValue } from 'ant-design-vue/es/select'
import * as echarts from 'echarts'
import { getEmployeesUnpaid } from '@/api/statistics'
import type { PaywageDetailsStatisticsDto } from '@/api/statistics/types'
import type { SegmentedValue } from 'ant-design-vue/es/segmented/src/segmented'
import type { EChartsOption } from 'echarts'

console.log(33333, echarts)

@Component
export class StatisticalAnalysis extends Render {

    @Ref echartRef!: HTMLElement

    myChart: any = null

    selectValue = 'receivePeople' as SelectValue

    selectOption = [
        {
            label: '领薪人数',
            value: 'receivePeople'
        },
        {
            label: '发薪金额',
            value: 'salaryAmount'
        },
        {
            label: '员工库',
            value: 'employees'
        }
    ]

    day = '本周' as SegmentedValue

    dayOptions = [
        {
            label: '本周',
            value: 7
        },
        {
            label: '本月',
            value: 30
        },
    ]

    chartDate = {} as PaywageDetailsStatisticsDto

    seriesName () {
        return this.selectOption.find(i => i.value === this.selectValue)?.label || 'receivePeople'
    }

    onSelectChange(ev: SelectValue) {
        this.selectValue = ev
        this.setOption()
    }

    onSegmentChange(ev: SegmentedValue) {
        this.day = ev
        this.initData()
    }

    createChartOption(date: string[], data: string[]): EChartsOption {
        const chartOption: EChartsOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#EAEAEF',
                        type: 'solid'
                    },
                },
                axisLabel: {
                    show: true,
                    color: '#9497B1',
                    margin: 20
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#9497B1'
                }
            },
            grid: {
                left: 40,
                right: 40,
                top: 30,
                bottom: 30,
            },
            series: [
                {
                    name: this.seriesName(),
                    type: 'line',
                    showSymbol: false,
                    sampling: 'lttb',
                    smooth: true,
                    itemStyle: {
                        color: 'rgba(12, 83, 252, 1)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(12, 83, 252, 0.2)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(12, 83, 252, 0)'
                            }
                        ])
                    },
                    data: data
                }
            ]
        }
        return chartOption
    }

    async initData() {
        const day = this.dayOptions.find(i => i.label === this.day)?.value || 7
        const res = await getEmployeesUnpaid({
            companyId: 1304,
            days: day
        })
        this.chartDate = res
        this.setOption()
    }

    setOption() {
        const date = this.chartDate.date
        const data = this.chartDate[this.selectValue as keyof PaywageDetailsStatisticsDto]
        this.myChart.setOption(this.createChartOption(date, data))
    }

    onMounted() {
        this.myChart = echarts.init(this.echartRef)
        this.initData()
    }
    render() {
        return <>
            <div class="flex justify-between mt-20px">
                <div class="text-lg">统计分析</div>
                <div>
                    <Select class="!w-100px mr-16px" size='small' v-model:value={this.selectValue} onChange={this.onSelectChange}>
                        {
                            this.selectOption.map(i => {
                                return <SelectOption value={i.value}>{i.label}</SelectOption>
                            })
                        }
                    </Select>
                    <Segmented size='small' v-model:value={this.day} options={this.dayOptions.map(i => i.label)} onChange={this.onSegmentChange}></Segmented>
                </div>
            </div>
            <div ref="echartRef" class="w-full h-300px"></div>
        </>
    }
}

export default toNative<{}, {}>(StatisticalAnalysis)